<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" type="text/css" href="../themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="../themes/icon.css">
    <script src="../js/jquery.min.js"></script>
    <script src="../js/jquery.easyui.min.js"></script>
    <script type="text/javascript" src="../js/jquery.serializejson.min.js"></script>

</head>

<body>
    <table id="dg"></table>

    <div id="dlg" class="easyui-dialog" title="数据操作" data-options="iconCls:'icon-save',closed:true" style="width:400px;height:200px;padding:10px">
        <form id="ff" method="post">
            <input class="easyui-textbox" name="_id" style="width:100%" data-options="label:'_Id:'">
            <div style="margin-bottom:20px">
                <input class="easyui-textbox" name="name" style="width:100%" data-options="label:'Name:',required:true">
            </div>
            <div style="margin-bottom:20px">
                <input class="easyui-textbox" name="password" style="width:100%" data-options="label:'Password:',required:true">
            </div>
            <a href="#" id="dataSubmit" class="easyui-linkbutton" data-options="iconCls:'icon-add'">提交数据</a>

        </form>

    </div>


    <div id="ft" style="padding:2px 6px;">
        <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-add'">Add</a>
        <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-remove'">Remove</a>
        <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-save'">Save</a>
        <input class="easyui-input" style="width:110px" name="name" id="name">
        <a href="#" class="easyui-linkbutton" iconCls="icon-search">Search</a>
    </div>
</body>

</html>
<script>
    // 设置属性是在当前组件对象上进行设置
    // 事件与属性一样，都是组件内部发生的
    $('#dg').datagrid({
        url: 'http://localhost:3000/users/list',
        fit: true,
        pagination: true,
        pageSize: 5,
        method: 'post',
        pageList: [5, 10, 20, 30, 40, 50],
        columns: [[

            { field: 'ck', checkbox: true },
            { field: 'name', title: 'Name', width: 100 },
            {
                field: 'operate', title: '操作', width: 200,

                formatter: function (value, row, index) {
                    console.log(index);
                    return "<a href='javascript:void(0)' onclick=onDelete('" + row._id + "')>删除</a> <a href='javascript:void(0)' onclick=onEdit('" + row._id + "')>修改</a>"
                }
            }
        ]],
        toolbar: [{
            iconCls: 'icon-add',
            handler: function () {
                // 打开之前
                $('#ff').form('clear');
                $('#dlg').dialog('open');
            }
        }, '-', {
            iconCls: 'icon-edit',
            handler: function () { alert('edit') }
        }, '-', {
            iconCls: 'icon-remove',
            handler: function () {
                var ids = [];
                // ??删除按钮在点击以后要做的事情是什么？
                var rows = $("#dg").datagrid('getSelections');
                if (rows.length > 0) {
                    for (var i = 0; i < rows.length; i++) {
                        ids.push(rows[i]._id)
                    }
                }

                $.ajax({
                    url: 'http://localhost:3000/users/data/removes',
                    data: {
                        ids: ids.toString()
                    },
                    type: 'post'
                }).then(res => {

                    $("#dg").datagrid('reload');

                })
            }
        }],
        footer: '#ft'
    });


    $("#dataSubmit").click(function () {
        var formData = $('#ff').serializeJSON();

        if (formData._id.trim().length > 0) {
            // 修改
            $.ajax({
                url: `http://localhost:3000/users/data/${formData._id}`,
                data: formData,
                type: 'put'
            }).then(function (res) {
                $("#dlg").dialog('close');
                // 调用方式是在组件的外部进行调用
                $("#dg").datagrid("reload");
            })
        } else {
            delete formData._id;
            $.ajax({
                url: 'http://localhost:3000/users/data',
                data: formData,
                type: 'post'
            }).then(function (res) {
                $("#dlg").dialog('close');
                // 调用方式是在组件的外部进行调用
                $("#dg").datagrid("reload");
            })
        }

    })

    function onDelete(id) {
        console.log(id);

        $.messager.confirm('删除确认操作', '你确认删除该记录?', function (r) {
            if (r) {
                $.ajax({
                    url: `http://localhost:3000/users/data/${id}`,
                    type: 'delete'
                }).then(res => {
                    if (res.status === 200) {

                        $.messager.show({
                            title: '信息的显示',
                            msg: res.message,
                            showType: 'show'
                        });

                        $('#dg').datagrid('reload');
                    }
                })
            }
        });


    }

    function onEdit(id) {
        console.log(id);
        $.ajax({
            url: `http://localhost:3000/users/data/${id}`,
            type: 'get'
        }).then(res => {
            $('#ff').form('load', res);
            $("#dlg").dialog('open');

        })
    }
</script>